window.addEventListener('pageshow', function() {
    /* 获取元素 */
    var banner = this.document.getElementById('banner');
    var lis = this.document.querySelectorAll('#lis li');

    /* 给每个li设置index属性 */
    for (var x = 0; x < lis.length; x++) {
        lis[x].setAttribute('index', x);
    }

    /* 默认 */
    var i = 1;
    lis[0].classList.add('red');

    /* 变换背景，li背景色函数 */
    function change() {
        banner.style.background = "url('imgs/" + i + ".jpg') no-repeat";

        /* 清除所有li的背景颜色 */
        for (var j = 0; j < lis.length; j++) {
            lis[j].classList.remove('red');
        }

        /* 给当前li添加背景色 */
        lis[i].classList.add('red');

        i++
        if (i > 5) {
            i = 0;
        }
    }

    /* 阻止冒泡事件 */
    function pop(e) {
        if (e && e.stopPropagation) {
            e.stopPropagation();
        } else { window.event.cancelBubble = true; }
    }

    /* 轮播图 */
    var timer = setInterval(() => {
        change();
    }, 1800);

    /* 当鼠标经过轮播图时，轮播图暂停 */
    banner.addEventListener('mouseover', function(e) {
        pop(e);
        clearInterval(timer);
    }, false);

    /* 鼠标离开轮播图，轮播图继续 */
    banner.addEventListener('mouseout', function(e) {
        pop(e);
        timer = setInterval(() => {
            change();
        }, 3000);
    }, false);

    /* 鼠标经过当前li时，轮播图暂停, 并返回当前图片 */
    for (var j = 0; j < lis.length; j++) {
        lis[j].addEventListener('mouseover', function(e) {
            pop(e);

            clearInterval(timer);
            i = this.getAttribute('index');
            change();
        }, false);
    }
})